<template>
    <div class="good">
        <div class="headerwrap">
            <div class="header">
                <div class="header-left">
                    <span @click="goback()"></span>
                </div>
                <div class="header-center">
                    <!-- 京东 -->
                    <span>商品评价</span>
                    <span>优惠套装</span>
                    <span>增值服务</span>
                    <span>赠品</span>
                    <span>送装服务</span>
                </div>
                <div class="header-right" @click="change()">
                    <span></span>
                </div>
                <div class="drop-down-list" v-show="show1">
                    <ul>
                        <li>
                            <router-link to="/">
                                <span><img src="../../assets/images/dropdownlist1.png" alt=""></span>
                                <strong>首页</strong>
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/classification">
                                <span><img src="../../assets/images/dropdownlist2.png" alt=""></span>
                                <strong>分类搜索</strong>
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/">
                                <span><img src="../../assets/images/dropdownlist3.png" alt=""></span>
                                <strong>购物车</strong>
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/">
                            <span><img src="../../assets/images/dropdownlist4.png" alt=""></span>
                                <strong>我的京东</strong>
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/">
                            <span><img src="../../assets/images/dropdownlist5.png" alt=""></span>
                                <strong>浏览记录</strong>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div> 
        </div> 

        <div class="shuffling">
            <mt-swipe :auto="0" :show-indicators="false">
                <mt-swipe-item><img src="../../assets/images/detail01.webp.jpg" alt="商品图片"></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/images/detail02.webp.jpg" alt="商品图片"></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/images/detail03.webp.jpg" alt="商品图片"></mt-swipe-item>
            </mt-swipe>
        </div>

        <div class="information">
            <div class="g-price">
                <div class="theprice">
                    <span class="unit">¥</span>
                    <span class="integer">38</span>
                    <span class="decimal">.00</span>
                    <div></div>
                </div>
                <div class="otherinfo">
                    <span class="collect">
                        <router-link to="/">
                            收藏
                        </router-link>
                    </span>
                    <span class="remind">
                        <router-link to="/">
                            降价提醒
                        </router-link>
                    </span>
                </div>
            </div>

            <h6>劾凿 板鞋男春夏季休闲鞋男鞋子男学生小白鞋男士跑步运动鞋男韩版潮流百搭帆布青少年社会小伙休闲皮鞋男 JX-8613 白黑色 偏小一码 41</h6>
            <p class="infobottom">偏小一码，建议选大一码！</p>
        </div>

        <div class="preferential">
            <div class="premain">
                <span class="pre-font">优惠</span>
                <div class="discount d-first">
                    <span class="dis-first">满30减6</span>
                    <span class="dis-second"></span>
                    <span class="dis-third"></span>
                </div>
                <div class="discount d-second">
                    <span class="dis-first">满99减15</span>
                    <span class="dis-second"></span>
                    <span class="dis-third"></span>
                </div>
                <div class="discount d-third">
                    <span class="dis-first">新用户专享</span>
                    <span class="dis-second"></span>
                    <span class="dis-third"></span>
                </div>
            </div>
        </div>

        <div class="order">
            <div class="selected">
                <div class="s-top">
                    <h6>已选</h6>
                    <span>JX-8613 白黑色 偏小一码，41，1个</span>
                </div>
                <div class="s-buttom">
                    <span>本商品支持保障服务，点击可选服务</span>
                </div>
            </div>

            <div class="distribution">
                <span class="d-font">送至</span>
                <div class="d-center">
                    <p class="d-center-top">北京朝阳区三环到四环之间</p>
                    <p class="d-center-buttom">
                        <span>现货</span>
                        现在至明日15:00前完成下单，预计7月22日22:00前发货，7月25日24:00前送达
                    </p>
                </div>
                <i></i>

            </div>

            <div class="freight">
                <span class="f-font">运费</span>
                <div class="tit">在线支付免运费 </div>
            </div>

            <div class="notice">
                <ul>
                    <li class="notice1">商家发货&售后</li>
                    <li class="notice2">7天无理由退货</li>
                    <li class="notice3">闪电退款</li>
                </ul>
            </div>
        </div>

        <div class="goodevaluation">
            <div class="evaluation">
                <div class="questions">
                    <div class="quesiontitle">问答</div>
                    <div class="titleright">查看全部内容</div>
                </div>
                <div class="questionmain">
                    <div class="thelist1 list1">
                        <p>
                            <span class="list-left">图片我看看</span>
                            <span class="list-right">共1个回答</span>
                        </p>
                    </div>
                    <div class="thelist1 list2">
                        <p>
                            <span class="list-left">质量咋样呀</span>
                            <span class="list-right">共1个回答</span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="store">
                <div class="storename">
                    <span><img src="../../assets/images/jdlogo.png" alt=""></span>
                    <div class="storeinfo">
                        <div class="info-name">
                            鑫生缘鞋靴专营店
                        </div>
                        <div class="level">
                            <div>
                                店铺星级
                                <i class="start"></i>
                                <i class="start"></i>
                                <i class="start"></i>
                                <i class="start"></i>
                                <i class="start emptystart"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="storedata">
                    <div class="dataleft">
                        <p class="dl-one">1093</p>
                        <p class="dl-two">粉丝人数</p>
                    </div>
                    <div class="datacenter">
                        <p class="dl-one">827</p>
                        <p class="dl-two">全部商品</p>
                    </div>
                    <div class="dataright">
                        <div class="dr-one">
                            <span class="dr-one-left">评价</span>
                            8.69 | 低
                        </div>
                        <div class="dr-two">
                            <span class="dr-one-left">物流</span>
                            9.00 | 中
                        </div>
                        <div class="dr-three">
                            <span class="dr-one-left">售后</span>
                            8.69 | 低
                        </div>
                    </div>
                </div>
                <div class="storebottom">
                    <button class="focus">
                        <i class="s-icon f-icon"></i>
                        关注店铺
                    </button>
                    <button class="focus enter">
                        <i class="s-icon e-icon"></i>
                        进入店铺
                    </button>
                </div>
            </div>

            <div class="recycling">
                <div class="recyclingmain">
                    <p class="r-maintop">
                        <img src="//img14.360buyimg.com/jdphoto/jfs/t14269/206/1377464630/417/1601d619/5a4dd753N5a33ba54.png.webp" alt="">
                        <span>高价回收</span>
                    </p>
                    <p class="r-mainbottom">
                        <span class="r-b-text">旧品回收，免费估价，极速到账</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            show1:false
        }
    },
    methods:{
        change(){
            this.show1=!this.show1
        },
        goback(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
    .good{
        background: #f0f0f0;
    }
    .good .headerwrap{
        /* position: fixed; */
        z-index: 11;
    }
    .good  .header{
        position: relative;
        height: 44px;
        width: 100%;
        border-bottom: 1px solid #e5e5e5;
        background-color: #fff;
        /* opacity: 0; */
        border-color: transparent;
        background: transparent;
        overflow: hidden;
        z-index: 11;
    }
    .good .header-left{
        /* width: 10%;
        height: 44px;
        padding-top: 1px;
        float: left; */
        background-color: #666;
        padding: 5px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        margin: 7px 0 0 5px;
        float: left;
    }
    .good .header-left span{
        background: url() no-repeat 50%;
        /* margin: 12px 0 0 10px; */
        margin: 0;
        width: 20px;
        height: 20px;
        background-position: 0 0;
        /* background-size: contain; */
        background-size: 20px 20px;
        display: block;
    }
    .good .header-center{
        float: left;
        text-align: center;
        width: 80%;
        line-height: 44px;
    }
    .good .header-center span{
        /* display: none; */
        visibility: hidden;
    }
    .good .header-right{
        float: left;
        /* width: 10%; */
        background-color: #666;
        padding: 5px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        margin: 7px 5px 0 0;
        opacity: 1;
    }
    .good .header-right span{
        background: url() no-repeat 50%;
        margin: 0px 12px 12px 0px;
        width: 20px;
        height: 20px;
        background-size: 20px;
        display: block;
    }
    .good .drop-down-list ul{
        position: absolute;
        border-radius: 4px;
        width: 125px;
        background: rgba(0,0,0,.9);
        top: 53px;
        right: 10px;
        z-index: 1000;
    }
    .good .drop-down-list ul::before{
        position: absolute;
        top: -5px;
        right: 5px;
        width: 10.5px;
        height: 5px;
        background: url() no-repeat 50%;
        background-size: 100% 100%;
        content: "";
    }
    .good .drop-down-list ul li{
        display: block;
        position: relative;
        margin-left: 40px;
        border-bottom: 1px solid hsla(0,0%,100%,.2);
        height: 40px;
        line-height: 40px;
        z-index: 1000;
        font-size: 14px;
    }
    .good .drop-down-list ul li a{
        color: #fff;
        text-decoration: none;
        font-size: 14px;   
    }
    .good .drop-down-list ul li span{
        position: absolute;
        top: 0;
        left: -40px;
        width: 40px;
        height: 40px;
    }
    .good .drop-down-list ul li span img{
        width: 15px;
        height: 15px;
    }
    .good .shuffling{
        left: 0px;
        width: 100%;
        height: 375px;
        z-index: 10;
        margin-top: -44px;
    }
    .good .shuffling img{
        /* position: absolute;
        top: 50%;
        left: 50%; */
        max-width: 100%;
        max-width: 100%;
    }
    .good .shuffling .mint-swipe-item{
        width: 375px;
        height: 375px;
    }
    .good .information{
        overflow: hidden;
        background: #fff;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .good .information .g-price{
        margin-top: 12px;
        margin-bottom: 0;
        padding: 0 18px;
        /* float: left; */
    }
    .good .information .theprice{
        font-family: JDZH-Regular;
        color: #f2270c;
        line-height: 30px;
        text-align: left;
        float: left;
    }
    .good .information .unit{
        font-size: 16px;
    }
    .good .information .integer{
        font-size: 30px;
    }
    .good .information .decimal{
        font-size: 18px;
    }
    .good .otherinfo span{
        float: right;
        margin-top: 1px;
    }
    .good .otherinfo a{
        float: right;
        position: relative;
        padding-top: 22px;
        line-height: 1em;
        height: 10px;
        width: 40px;
        font-size: 9px;
        color: #262626;
        text-align: center;
        text-decoration: none;
    }
    .good .otherinfo .collect a::after{
        content: "";
        background: url();
        width: 18px;
        height: 18px;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 30%;
    }
    .good .otherinfo .remind a::after{
        content: "";
        background: url() no-repeat;
        width: 18px;
        height: 18px;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 30%;
    }
    .good .information h6{
        font-weight: 700;
        line-height: 21px;
        padding-right: 0;
        float: left;
        color: #262626;
        font-size: 16px;
        margin: 12px 18px;
        line-height: 22px;
    }
    .good .information .infobottom{
        margin: 12px 18px;
        line-height: 1.3;
        font-size: 12px;
        float: left;
    }
    .good .preferential{
        margin-top: 12px;
        padding: 0 18px;
        border-radius: 12px;
        background-color: #fff;
        overflow: hidden;
    }
    .good .premain{
        padding: 18px 20px 5px 38px;
        font-size: 13px;
        line-height: 18px;
        word-break: break-word;
        overflow: hidden;
        position: relative;
    }
    .good .premain .pre-font{
        float: left;
        position: absolute;
        left: 0;
        top: 18px;
    }
    .good .preferential .discount{
        height: 19px;
        float: left;
        overflow: hidden;
        margin-right: 5px;
    }
    .good .preferential .dis-first{
        display: inline-block;
        margin-right: 5px;
        padding: 0 9px 0 12px;
        border-top: 1px solid #f2270c;
        border-bottom: 1px solid #f2270c;
        height: 16px;
        line-height: 16px;
        color: #f2270c;
        font-size: 10px;
    }
    .good .preferential .dis-first::before{
        content: "";
        background: url();
        background-size: 15px 18px;
        background-repeat: no-repeat;
        position: absolute;
        top: 19px;
        left: 38px;
        height: 18px;
        width: 7px;
    }
    .good .preferential .dis-first::after{
        content: "";
        background: url();
        background-size: 15px 18px;
        background-repeat: no-repeat;
        position: absolute;
        top: 19px;
        left: 93px;
        height: 18px;
        /* transform:rotate(180deg) */
        right: 0;
        width: 4px;
        background-position: -11px 0;
    }
    .good .preferential .d-second .dis-first::before{
        content: "";
        background: url();
        background-size: 15px 18px;
        background-repeat: no-repeat;
        position: absolute;
        top: 19px;
        left: 102px;
        height: 18px;
        width: 7px;
    }
    .good .preferential .d-second .dis-first::after{
        content: "";
        background: url();
        background-size: 15px 18px;
        background-repeat: no-repeat;
        position: absolute;
        top: 19px;
        left: 165px;
        height: 18px;
        /* transform:rotate(180deg) */
        right: 0;
        width: 4px;
        background-position: -11px 0;
    }
    .good .preferential .premain .d-third{
        background-color: #f2270c;
        margin: 0 8.5px 0 9px;
        height: 18px;
    }
    .good .preferential .premain .d-third .dis-first{
        color: #fff;
        padding: 0px 5px;
    }
    .good .preferential .d-third .dis-third::before{
        content: "";
        background: url("");
        background-size: 15px 18px;
        background-repeat: no-repeat;
        position: absolute;
        top: 18px;
        left: 179px;
        height: 18px;
        width: 9px;
    }
    .good .preferential .d-third .dis-third::after{
        content: "";
        background: url("");
        background-size: 15px 18px;
        background-repeat: no-repeat;
        position: absolute;
        top: 18px;
        left: 253px;
        height: 18px;
        right: 0;
        width: 4.5px;
        background-position: -11px 0;
    }
    .good .preferential .premain::after{
        content: "";
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        right: 0px;
        background-image: url();
        background-repeat: no-repeat;
        background-size: 20px;
    }
    .good .order{
        margin-top: 12px;
        padding: 0 18px;
        border-radius: 12px;
        background-color: #fff;
        overflow: hidden;
    }
    .good .order .selected{
        background: #fff;
        padding: 18px 0;
        position: relative;
        font-size: 13px;
        color: #8c8c8c;
    }
    .good .order .s-top{
        position: relative;
        padding: 0 40px 0 38px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 46px;
        text-align: left;
    }
    .good .order .s-top h6{
        color: #262626;
        font-weight: 700;
        position: absolute;
        top: 10%;
        left: 0;
        width: 35px;
        font-size: 14px;
        line-height: 22px;
    }
    .good .order .s-top span{
        font-size: 13px;
        color: #333;
        line-height: 30px;
    }
    .good .order .s-buttom {
        padding: 0 20px 0 38px;
        font-size: 12px;
        margin-top: -13px;
        text-align: left;
    }
    .good .order .s-buttom::after{
        content: "";
        top: 20px;
        right: 0;
        background: url();
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        position: absolute;
    }
    .good .distribution{
        position: relative;
        padding: 18px 20px 18px 0;
        font-size: 13px;
        overflow: hidden;
    }
    .good .distribution::before{
        content: "";
        height: 0;
        display: block;
        border-top: 1px solid #ddd;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        left: 10px;
        border-color: #f2f2f2;
    }
    .good .distribution .d-font{
        width: 38px;
        color: #262626;
        font-weight: 700;
        font-size: 14px;
        float: left;
        margin-left: -2px;
    }
    .good .d-center{
        float: left;
        text-align: left;
        width: 88%;
    }
    .good .d-center p{
        line-height: 23px;
    }
    .good .distribution i{
        position: absolute;
        right: 0;
        background-image: url();
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
    }
    .good .freight{
        position: relative;
        padding: 18px 20px 18px 0;
        font-size: 13px;
        overflow: hidden;
    }
    .good .freight::before{
        content: "";
        height: 0;
        display: block;
        border-top: 1px solid #ddd;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        left: 10px;
        border-color: #f2f2f2;
    }
    .good .freight .f-font{
        width: 38px;
        color: #262626;
        font-weight: 700;
        font-size: 14px;
        float: left;
    }
    .good .freight .tit{
        font-size: 13px;
        color: #333;
        overflow: hidden;
        float: left;
    }
    .good .notice{
        padding: 9px 18px;
        margin: 0 -18px;
        background-color: #fafafa;
    }
    .good .notice ul{
        position: relative;
        color: #262626;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        padding-right: 20px;
    }
    .good .notice ul li{
        padding: 3px 12px 3px 0;
        display: inline-block;
        line-height: 1;
        color: #8c8c8c;
    }
    .good .notice .notice1::before{
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 6px;
        width: 11px;
        height: 11px;
        background: url() no-repeat;
        background-size: 11px auto;
    }
    .good .notice .notice2::before{
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 6px;
        width: 11px;
        height: 11px;
        background: url() no-repeat;
        background-size: 11px auto;
    }
    .good .notice .notice3::before{
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 6px;
        width: 11px;
        height: 11px;
        background: url() no-repeat;
        background-size: 11px auto;
    }
    .good .notice .notice3::after{
        content: "";
        right: 0;
        top: 0;
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url();
        background-repeat: no-repeat;
        background-size: 20px;
    }
    .good .evaluation{
        padding: 0 18px;
        border-radius: 12px;
        background-color: #fff;
        overflow: hidden;
        margin-top: 12px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .good .questions{
        position: relative;
        padding: 0;
        padding-left: 7px;
        height: 44px;
        line-height: 44px;
        font-size: 15px;
        color: #262626;
        font-weight: 700;
    }
    .good .quesiontitle{
        position: relative;
        padding: 0;
        padding-left: 7px;
        height: 44px;
        line-height: 44px;
        font-size: 15px;
        color: #262626;
        font-weight: 700;  
        text-align: left;  
    }
    .good .questions::before{
        content: "";
        background-image: linear-gradient(180deg,#f5503a,#fad1cb);
        position: absolute;
        left: 0px;
        top: 35%;
        width: 3px;
        height: 15px;
    }
    .good .titleright{
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 15px;
        font-size: 12px;
        color: #8c8c8c;
        font-weight: 400;
    }
    .good .questions::after{
        content: "";
        right: 0;
        top: 35%;
        background: url() no-repeat;
        background-size: cover;
        height: 12px;
        width: 12px;
        display: block;
        position: absolute;
    }
    .good .questionmain{
        position: relative;
        padding: 4px 0px 18px;
        overflow: hidden;
    }
    .good .questionmain .thelist1{
        margin-bottom: 18px;
        overflow: hidden;
    }
    .good .questionmain .thelist1 p{
        color: #333;
        font-size: 12px;
    }
    .good .questionmain .list1 p::before{
        content: "问";
        display: inline-block;
        margin: -1px 5px 0 0;
        width: 14px;
        height: 14px;
        line-height: 14px;
        border-radius: 2px;
        background-color: #ff9600;
        color: #fff;
        font-size: 10px;
        vertical-align: middle;
        text-align: center;
        position: absolute;
        left: 0px;
        top: 5px;
    }
    .good .questionmain .thelist1 .list-left{
        float: left;
        margin-left: 18px;
    }
    .good .questionmain .thelist1 .list-right{
        float: right;
    }
    .good .questionmain .list2 p::before{
        content: "问";
        display: inline-block;
        margin: -1px 5px 0 0;
        width: 14px;
        height: 14px;
        line-height: 14px;
        border-radius: 2px;
        background-color: #ff9600;
        color: #fff;
        font-size: 10px;
        vertical-align: middle;
        text-align: center;
        position: absolute;
        left: 0px;
        top: 40px;
    }
    .good .store{
        margin-top: 12px;
        border-radius: 12px;
        padding: 18px;
        background-color: #fff;
        overflow: hidden;
        font-size: 14px;
        color: #333;
    }
    .good .store .storename{
        margin-bottom: 10px;
        display: flex;
    }
    .good .storename span{
        width: 40px;
        height: 40px;
        margin-right: 12px;
        position: relative;
    }
    .good .storename span img{
        border-radius: 6px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .good .storename .storeinfo{
        line-height: 20px;
        overflow: hidden;
        text-align: left;
    }
    .good .info-name{
        font-size: 14px;
        height: 14px;
        line-height: 14px;
        overflow: hidden;
    }
    .good .level{
        color: #999;
        font-size: 10px;
        line-height: 14px;
        color: #666;
        margin-top: 10px;
    }
    .good .level .start{
        margin-left: 2px;
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url();
        background-repeat: no-repeat;
        background-size: cover;
    }
    .good .level .emptystart{
        background-image: url();
    }
    .good .storedata{
        margin: 18px 0px;
        display: flex;
    }
    .good .storedata .dataleft,.datacenter{
        position: relative;
        padding: 2px 0px;
        text-align: center;
        width: 40%;
    }
    .good .storedata .dataleft::after{
        content: "";
        width: 0;
        display: block;
        border-right: 1px solid #ddd;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        border-color: #ddd;
    }
    .good .dl-one{
        margin-bottom: 3px;
        font-size: 14px;
    }
    .good .dl-two{
        margin-top: 3px;
        font-size: 10px;
        color: #999;
    }
    .good .dataright{
        font-size: 10px;
        text-align: left;
    }
    .good .dr-one{
        color: #18c461;
    }
    .good .dr-one-left{
        margin-right: 5px;
        color: #999;
    }
    .good .dr-two{
        color: #e4393c;
    }
    .good .dr-three{
        color: #18c461;
    }
    .good .storebottom{
        margin: 0px;
    }
    .good .focus{
        position: relative;
        margin: 0 13px 0 0;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        background-color: #fff;
        border: none;
        border-radius: 15px;
        border: 1px solid #8c8c8c;
    }
    .good .enter{
        margin-right: 0px;
    }
    .good .focus .s-icon{
        width: 14px;
        height: 14px;
        background: no-repeat 50%;
        background-size: 100%;
        position: relative;
        top: -2px;
        margin-right: 5px;
        vertical-align: middle;
        display: inline-block;
    }
    .good .focus .f-icon{
        background-image: url();
    }
    .good .enter .e-icon{
        background-image: url();
    }
    .good .recycling{
        margin-top: 12px;
        padding: 0px 18px;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
    }
    .good .recyclingmain{
        padding: 12px 0px;
        position: relative;
        overflow: hidden;
    }
    .good .r-maintop{
        text-align: left;
        margin-left: 24px;
    }
    .good .recyclingmain img{
        position: absolute;
        top: 16px;
        left: 0;
        width: 15px;
        height: 15px;
        background: #fff;
    }
    .good .r-mainbottom{
        padding: 0px 35px;
        padding-left: 23px;
        font-size: 12px;
        text-align: left;
        margin-top: 10px;
    }
    .good .r-b-text{
        color: #999;
    }
    .good .recyclingmain::after{
        content: "";
        background: url() no-repeat;
        background-size: cover;
        width: 12px;
        height: 12px;
        top: 30px;
        right: 0px;
        display: inline-block;
        position: absolute;
    }
</style>